<template>
  <div class="app-container">
    <el-form ref="form" :model="connectionConfigurationAdd" :rules="rules" label-width="120px">
      <el-form-item label="连接名称:" prop="connectionName">
        <el-input v-model="connectionConfigurationAdd.connectionName" />
      </el-form-item>
      <el-form-item label="连接类型:" prop="connectionType">
          <el-select v-model="connectionConfigurationAdd.connectionType" clearable placeholder="请选择">
            <el-option
              v-for="item in connectionConfigurationType"
              :key="item.connectionMsg"
              :label="item.connectionMsg"
              :value="item.connectionType">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="连接ip地址:" prop="connectionIp">
        <el-input v-model="connectionConfigurationAdd.connectionIp" />
      </el-form-item>
      <el-form-item label="端口:" prop="connectionPort">
          <el-input v-model="connectionConfigurationAdd.connectionPort" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="连接用户名:" prop="connectionUsername" >
          <el-input v-model="connectionConfigurationAdd.connectionUsername" autocomplete="off"></el-input>
      </el-form-item>  
      <el-form-item label="连接密码:" prop="connectionPassword">
          <el-input v-model="connectionConfigurationAdd.connectionPassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="数据库名:" prop="connectionDatabase">
          <el-input v-model="connectionConfigurationAdd.connectionDatabase" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="备注:" placeholder="请输入备注">
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 50}"
              placeholder="请输入内容"
              v-model="connectionConfigurationAdd.remark">
          </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{messageView.sumit}}</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script>
  import {
    findType,
    ConfigurationAddAxios,
    getAxios,
    putAxios
  } from '@/api/connectionConfiguration'
  export default {
    name: "connectionConfigurationFrom",
    data() {
      return {
        isAdd: true,
        isAddMessage: { sumit: "新增" },
        noAddMessage: { sumit: "编辑" },
        messageView: {},
        globalId:"",
        datasourceId: "",
        connectionConfigurationAdd: {},
        connectionConfigurationType:[],
        connectionId:"",
        connectionName: "",
        connectionType: "",
        connectionIp: "",
        connectionPort: "",
        connectionUsername: "",
        connectionPassword:"",
        connectionDatabase:"",
        rules: {
          connectionName: [
            { required: true, message: "请输入连接名称", trigger: "blur" },
          ],
          connectionType: [
            { required: true, message: "请选择参数类型", trigger: "change" },
          ],
          connectionIp: [
            { required: true, message: "请输入连接IP地址", trigger: "blur" },
          ],
          connectionPort: [
            { required: true, message: "请输入连接端口号", trigger: "blur" },
          ],
          connectionUsername: [
            { required: true, message: "请输入连接用户名", trigger: "blur" },
          ],
          connectionPassword: [
            { required: true, message: "请输入连接密码", trigger: "blur" },
          ],
          connectionDatabase: [
            { required: true, message: "请输入连接数据库名", trigger: "blur" },
          ]
        }
      };
    },
    methods: {
      findAllType() {
        findType().then(resp=>{
          this.connectionConfigurationType=resp.data;
        })
      },
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.isAdd) {
              ConfigurationAddAxios(this.connectionConfigurationAdd).then(resp=>{
                  this.$message({
                            message: resp.msg,
                            type: 'success'
                          });
                  this.$router.push("/environment/connectionConfiguration");        
              })
            } else {
              this.ConfigurationUpdate();
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      onCancel() {
        this.connectionConfigurationAdd = {};
        this.$router.push("/environment/connectionConfiguration");
      },
      detail(connectionId){
        getAxios(connectionId).then(resp=>{
            this.connectionConfigurationAdd=resp.data;
        })
      },
      ConfigurationUpdate(){
        putAxios(this.connectionConfigurationAdd).then(resp=>{
            this.$message({
                      message: resp.msg,
                      type: 'success'
                    });
            this.$router.push("/environment/connectionConfiguration");        
        })
      },
    },
    created() {
      this.$router.onReady(() => {
        this.isAdd = this.$route.query.isAdd;
        this.connectionId = this.$route.query.connectionId;
      });
      this.findAllType();
      if (this.isAdd) {
        this.messageView = this.isAddMessage;
      } else {
        this.messageView = this.noAddMessage;
        this.detail(this.connectionId);
      }
    },
  };
</script>
  
  <style scoped>
.line {
  text-align: center;
}
</style>
  
  